<template>
  <div class='container'>
    <el-row>
      <el-col :span='24'>
        <el-card>
          <div class="search">
            <el-row>
              <el-form class="form" label-width="100px" :model="orderParams">
                <el-col :span="8">
                  <el-form-item label="用户名">
                    <el-input v-model="orderParams.nickName" size="mini" placeholder="请输入用户名"></el-input>
                  </el-form-item>
                  <el-form-item label="注册时间">
                    <el-date-picker
                      v-model="orderParams.registTimem"
                      type="date"
                      @change="getDate"
                      value-format="yyyy-MM-dd"
                      placeholder="请选择日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="手机号">
                    <el-input v-model="orderParams.mobile" size="mini" placeholder="请输入手机号"></el-input>
                  </el-form-item>
                  <el-form-item label="注册地">
                    <el-input v-model="orderParams.shopCode" size="mini" placeholder="请选择注册地"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="姓名">
                    <el-input v-model="orderParams.name" size="mini" placeholder="请输入姓名"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :offset="8">
                  <el-form-item>
                    <el-button @click="submitSearch()">搜索</el-button>
                    <el-button @click="clearListSearch">重置</el-button>
                  </el-form-item>
                </el-col>
              </el-form>
            </el-row>
          </div>

          <div slot="header">
            <bread></bread>
          </div>

          <div class="business-table">

            <div class="table-wrapper">
              <el-table
                :data="userList"
                style="width: 100%"
                align='center'
                :header-cell-style="{background:'#eef1f6'}"
                @selection-change="handleSelectionChange"
              >

                <el-table-column
                  label="序号"
                  align='center'
                  width="50">
                  <template slot-scope='scope'>
                    <span>{{scope.$index +1}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="nickName"
                  label="用户名"
                  align='center'
                >
                </el-table-column>
                <el-table-column
                  prop="mobile"
                  label="手机号"
                  align='center'
                  width="150"
                  :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                  prop="registTime"
                  label="注册时间"
                  align='center'
                  width="120">
                </el-table-column>
                <el-table-column
                  label="注册地"
                  align='center'
                  width="120">
                  <template slot-scope='scope'>
                    <span>{{scope.row.province}}{{scope.row.city}}{{scope.row.area}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="姓名"
                  align='center'
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="loginTime"
                  label="最后登录时间"
                  align='center'
                  width="120">
                </el-table-column>
                <el-table-column
                  align='center'
                  label="操作"
                  width="180">
                  <template slot-scope='scope'>
                    <el-col>
                      <el-button
                        type="text"
                        size="mini"
                        @click='showDialog(0,scope.row)'
                      >
                        禁用
                      </el-button>
                      <el-button
                        type="text"
                        size="mini"
                        @click='showDialog(1,scope.row)'
                      >
                        启用
                      </el-button>
                    </el-col>

                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="pagination">
            <pagination :pageTotal="pageTotal" @handleCurrentChange="handleCurrentChange"
                        @handleSizeChange="handleSizeChange"></pagination>
          </div>
          <!-- 提示框 -->
          <el-dialog title="提示" :visible.sync="dialogVisible" width="350px" center :modal-append-to-body="false">
            <div class="del-dialog-cnt" v-if="userFucParams.type == 1">确定启用吗？</div>
            <div class="del-dialog-cnt" v-if="userFucParams.type == 0">确定禁用吗？</div>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="getUserFunc()">确 定</el-button>
            </div>
          </el-dialog>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import pagination from '../../common/pagination'
import bread from '../../common/bread'
import { formatDate } from 'src/utils/utils'
import { userList, userFunction } from '../../api/api'

export default {
  data () {
    return {
      userList: [],
      orderParams: {
        pageNum: 1,
        pageSize: 10
      },
      pageTotal: 0,
      multipleSelection: [],
      value1: '',
      dialogVisible: false,
      userFucParams: {
        editId: '',
        userId: sessionStorage.getItem('userId'),
        type: 0
      }
    }
  },
  mounted () {
    this.getGoodsList()
  },
  methods: {
    // 格式化表单数据
    clearForm () {
      this.orderParams = {
        pageNum: 1,
        pageSize: 10
      }
    },
    // 清除列表的搜索表单
    clearListSearch () {
      this.clearForm()
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    show (scope) {
      console.log(scope)
    },

    handleClick () {
      this.clearForm()
      this.getGoodsList()
    },

    // 表格数据
    getGoodsList (type) {
      this.userList = []
      this.orderParams.status = this.tabsName
      const para = Object.assign({}, this.orderParams)
      userList(para).then(res => {
        console.log(res)
        this.userList = res.data.list
        this.pageTotal = res.data.total
      })
    },
    // 上下分页
    handleCurrentChange (val) {
      this.orderParams.pageNum = val
      this.getGoodsList()
    },
    // 每页显示多少条
    handleSizeChange (val) {
      this.orderParams.pageSize = val
      this.getGoodsList()
    },
    submitSearch () {
      this.getGoodsList()
    },
    formatDate (row, column) {
      let date = row[column.property]
      date = new Date(date)
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    },
    showDialog (type, row) {
      this.userFucParams.type = type
      this.userFucParams.editId = row.userId
      this.dialogVisible = true
    },
    getUserFunc () {
      const para = Object.assign({}, this.userFucParams)
      userFunction(para).then(res => {
        console.log(res)
        this.dialogVisible = false
      })
    },
    getDate (date) {
      console.log(date)
    }
  },
  components: {
    pagination,
    bread
  }
}
</script>
<style lang='scss'>
  .business-tabs {
    margin: 0 0 10px 0;
  }

  .el-dialog--small {
    width: 600px !important;
  }

  .container {
    .search {
      margin: 0 0 20px 0;
    }

    .el-table {
      .warning-row {
        background-color: oldlace;
      }
    }

    .recommend-tag {
      display: inline-block;
      margin: 4px 0;
      margin-right: 4px;

      &:last-child {
        margin-right: 0;
      }
    }

    .table-footer {
      padding: 10px;
      background: #eef1f6;
    }
  }
</style>
